upcoming: [M3-7302] - Replace NodeBalancer detail charts with Recharts #9983
Conversation
hana-akamai
requested review from
carrillo-erik and
cpathipa
and removed request for
a team
|
Coverage Report: ❌ |
| {payload.map((item) => ( | ||
| <Typography fontFamily={theme.font.bold} key={item.dataKey}> | ||
| {item.dataKey}: {tooltipValueFormatter(item.value)} | ||
| </Typography> | ||
| ))} |
There was a problem hiding this comment.
Handle displaying multiple values (e.g. traffic in and traffic out values for the nodebalancer traffic chart)
| timeData.push({ | ||
| 'Traffic In': trafficIn[i][1], | ||
| 'Traffic Out': trafficOut[i][1], | ||
| t: trafficIn[i][0], | ||
| }); |
There was a problem hiding this comment.
Format data to easily display stacked areas https://recharts.org/en-US/examples/StackedAreaChart
There was a problem hiding this comment.
Observation: Looks like like there is a difference in y-axis / x-axis points compared to prod and this branch.
| Prod | This Branch |
|---|---|
 |
 |
Observation: Firewall section is not appearing in this branch.
Not sure if this is expected as part of this change.
| Prod | This Branch |
|---|---|
 |
 |
|
@cpathipa The axis points displayed are expected to be slightly different but the data at each point are still the same |
|
The UI and data looks good. I am noticing a delay when viewing the charts in the NodeBalancer Summary page. I do not experience any delays when looking at the charts in Linodes Transfer tab. However, the same behavior occurs in PROD, will require more investigation for the cause of this. |
Description 📝
This PR is part of a bigger effort to replace chart.js with the more modern Recharts.
Changes 🔄
List any change relevant to the reviewer.
Preview 📷
connections.before.mov
connections.after.mov
traffic.before.mov
traffic.after.mov
How to test 🧪
Prerequisites
(How to setup test environment)
Verification steps
(How to verify changes)
As an Author I have considered 🤔
Check all that apply